<template>
    <button @click="drawCube">画方块</button>

    <div id="myThreeDemo1" class="threeDContainer">
        3d
    </div>
</template>

<script setup>
import {ref, onMounted, render} from 'vue'
import * as THREE from 'three'

onMounted(()=>{

    initThreeD();
})

const initThreeD = ()=>{
    // // 1.创建场景
    // let scene = new THREE.Scene();
    // // 2.创建透视相机
    // let camera = new THREE.PerspectiveCamera(75, 45, 400 / 300, 1, 100);
    // // 3.创建一个webgl渲染器
    // let renderer = new THREE.WebGLRenderer({
    //     // alpha: true, //默认为黑色，如果设置为true就是透明的，为白色
    // })
    // //设置渲染器的大小窗口的内宽度，也就是内容区的宽度
    // renderer.setSize(500, 500);

    // document.getElementById("myThreeDemo1").appendChild(renderer.domElement)
    // renderer.render(scene, camera)

    // // camera.position.z = 5;
    // // renderer.setClearColor(0xeeeeee, 1.0);


    /**
     * 创建场景对象Scene
     */
     var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); //材质对象Material
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中
    /**
     * 光源设置
     */
    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    // console.log(scene)
    // console.log(scene.children)
    
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-400, 400, 200, -200, 1, 1000);
    camera.position.set(200, 200, 300); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(500, 500);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.getElementById("myThreeDemo1").appendChild(renderer.domElement); //body元素中插入canvas对象
    //执行渲染操作   指定场景、相机作为参数
    renderer.render(scene, camera);
}



</script>

<style lang="scss" scoped>
.threeDContainer{
    width: 800px;
    height: 800px;
    background: #eee;
}
</style>